<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="<%=basePath%>js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/BaseUtile.js"></script>

<script type="text/javascript">
	
</script>
</head>
<body style="margin: 2%">

	<div id="main" style="height: 500px"></div>


	<script type="text/javascript" src="<%=basePath%>js/echarts.min.js"></script>
	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById('main'));
		var option = {
			title : {
				text : '采购计划的商品采购数量统计'
			},
			tooltip : {},
			legend : {
				data : [ ]
			},
			xAxis : {
				data : []
			},
			yAxis : {},
			series : [ {
				name : '数量',
				type : 'bar',
				data : []
			} ]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);

		getData();
		function getData() {
			// 路径配置
			$.get(SERVER_PRE_URL
					+ "purchaseOrder/getPurchaseOrderChartsDataAjax", function(
					data, status) {
				var rowData = new Array();
				var myTemp;
				for (var i = 0; i < data.length; i++) {
					myTemp = {
						value : data[i].material.materialName,
					};
					rowData.push(myTemp);
				}
				
				var columnData = new Array();
				for (var i = 0; i < data.length; i++) {
					myTemp = {
						value : data[i].materialQuantity,
					};
					columnData.push(myTemp);
				}
				

				myChart.setOption({
					xAxis : [ {
						// 根据名字对应到相应的系列
						data : rowData
					} ],
					series : [ {
						// 根据名字对应到相应的系列
						data : columnData
					} ]

				});

			});

		}
	</script>

















</body>
</html>